<template>
    <div class="app-container">
        <!-- 广告列表-->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-button type="primary" @click="addadvertise">新增</el-button>
            </div>
            <div>
                 <el-table
                    :data="advertisementList"
                    border
                    style="width: 100%">
                    <el-table-column fixed type="index" label="序号" width="50"> </el-table-column>
                    <el-table-column  label="广告图片" width="150"> 
                        <template slot-scope="scope">
                            <img style="width:100%;height:auto" :src="scope.row.pic" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column   label="时间" width="150"> 
                         <template slot-scope="scope">
                            <div>开始时间:{{scope.row.startTime}}</div>
                            <div>结束时间:{{scope.row.endTime}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column  prop="name" label="广告名称" width="150"> </el-table-column>
                    <el-table-column  prop="clickCount" label="点击数" width="150"> </el-table-column>
                    <el-table-column  prop="orderCount" label="下单数" width="150"> </el-table-column>
                    <el-table-column   label="轮播位置" width="150"> 
                        <template slot-scope="scope">
                            <div>{{scope.row.type==0?'首页轮播':''}}</div>
                         
                        </template>
                    </el-table-column>
                    <el-table-column  prop="url" label="链接地址" width="150"> </el-table-column>
                    <el-table-column  prop="note" label="备注" width="150"> </el-table-column>
                    <el-table-column   label="上下线状态" width="150"> 
                        <template slot-scope="scope">
                            <div>{{scope.row.status==0?'下线':'上线'}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right"  label="操作"  width="100">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editadvertise(scope.row)" size="small">编辑</el-button>
                        <el-button style="color:red" @click="deladvertise(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <Addadvertisement ref="addadvertisement"  />
    </div>
</template>
<script>
import market from "@/api/market/advertisement";
import Addadvertisement from "../components/Addadvertisement"
export default {
    components:{
        Addadvertisement
    },
    data(){
        return{
        advertisementList:[],
        }
    },
    methods:{
        init(){
            //获取广告列表失败
            market.adsList().then(res=>{
                console.log(res);
                if(res.success){
                    this.advertisementList=res.data.items
                }else{
                    this.$message.error("获取广告列表失败")
                }
            })
        },
          //新增
        addadvertise(){
           this.$refs.addadvertisement.setdvertise()
        },
        //编辑
        editadvertise(row){
            console.log(row)
              this.$refs.addadvertisement.open(row)
        },
        //删除
        deladvertise(row){
            console.log(row)
            this.$confirm('此操作将永久删除该广告, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                market.delAds(row.id).then(res=>{
                    console.log(res);
                    if(res.success){
                        this.init();
                         this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    }else{
                        this.$message.error("很遗憾,你删除失败了呢!")
                    }
                })
           
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        }
    },
    created(){
        this.init();
    }
}
</script>
<style lang="scss" scoped>

</style>